<template>
  <div style="height: 100%">
    <el-table :data="tableData" style="height: 90%" border>
      <el-table-column fixed prop="id" label="ID" width="150">
      </el-table-column>
      <el-table-column prop="orderSn" label="订单编号" width="120">
      </el-table-column>

      <el-table-column prop="price" label="佣金" width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.price / 100 }} 元</div>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.status == 0" type="success" effect="dark">
              待接单
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.updateTime | formatTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <button
            role="button"
            @click="handleClick(scope.row)"
            class="golden-button"
          >
            <span class="golden-text">查看</span>
          </button>
          <button
            role="button"
            @click="addorder(scope.row, scope.$index)"
            class="golden-button"
          >
            <span class="golden-text">接单</span>
          </button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="fn"
      :page-size="size"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>是否确认接单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toaddorder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getorderlist, acceptOrder } from '../../api/order';
export default {
  name: 'order',
  methods: {
    async fn(val) {
      this.page = val;
      await this.getdata();
    },
    addorder(val, index) {
      this.select = val.id;
      this.index = index;
      this.dialogVisible = true;
    },
    async toaddorder() {
      let result = await acceptOrder(this.select);
      this.dialogVisible = false;
      this.tableData.splice(this.index, 1);
    },
    handleClick(row) {},
    async getdata() {
      // 发送请求
      let result = await getorderlist({
        page: this.page,
        size: this.size,
      });
      this.total = result.total;
      this.tableData = result.data;
    },
  },
  created() {
    this.getdata();
  },
  data() {
    return {
      index: 0,
      select: 0,
      dialogVisible: false,
      total: 0,
      page: 1,
      size: 10,
      tableData: [],
    };
  },
};
</script>
<style>
.golden-button {
  touch-action: manipulation;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
  border: none;
  border-radius: 0.3em;
  height: 2.75em;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
    inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  background-image: linear-gradient(
    160deg,
    #a54e07,
    #b47e11,
    #fef1a2,
    #bc881b,
    #a54e07
  );
  border: 1px solid #a55d07;
  color: rgb(120, 50, 5);
  text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-size: 100% 100%;
  background-position: center;
}

.golden-button:focus,
.golden-button:hover {
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  border: 1px solid rgba(165, 93, 7, 0.6);
  color: rgba(120, 50, 5, 0.8);
}

.golden-button:active {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}
</style>
